<script setup>
import {getAssetsImages} from "@/utils/utils.js";
import VideoCard from "@/components/VideoCard.vue";
import {useRoute} from "vue-router";
import {onMounted, reactive, watch} from "vue";
import VideoApi from "@/api/VideoApi.js";

const route = useRoute()
const state = reactive({
  queryDto: {
    pageNum: 1,
    size: 20,
    categoryId: route.params.categoryId
  },
  videoList:[]
})
const getVideoList = () => {
  console.log("main")
  VideoApi.getVideoList(state.queryDto).then(res=>{
    state.videoList = res.data.data
  })
}
onMounted(()=>{
  getVideoList()
})
watch(() => route.params.categoryId, (categoryId, oldCategoryId) => {
  state.queryDto.categoryId = categoryId
  getVideoList()
}, {immediate: true});
</script>
<template>
  <div class="index-main">
<!--    <el-carousel :interval="5000" arrow="always">-->
<!--      <el-carousel-item>-->
<!--        <el-image :src="getAssetsImages('dp.avif')"/>-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->
    <div class="video-container">
      <VideoCard v-for="video in state.videoList" :key="video.videoCode" :video="video"/>
    </div>
  </div>
</template>


<style scoped lang="less">
:deep(.el-image__inner) {

}

:deep(.el-carousel__container) {
  border-radius: 10px;
  overflow: hidden;
}

.index-main {
  color: white;

}

.video-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin: 20px 0 100px 0;
}
</style>